<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
<head>
<title>Trang quản lý - loại website</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- bootstrap -->
<link href="css/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/bootstrap/bootstrap-overrides.css" type="text/css" rel="stylesheet" />

<!-- global styles -->
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/elements.css" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />

<!-- libraries -->
<link href="css/lib/font-awesome.css" type="text/css" rel="stylesheet" />

<!-- this page specific styles -->
<link rel="stylesheet" href="css/compiled/user-list.css" type="text/css" media="screen" />

<!-- open sans font -->
<link
  href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
  rel='stylesheet' type='text/css' />

<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

  <!-- navbar -->
  <div class="navbar navbar-inverse">
    <jsp:include page="import/navbar.jsp" />
  </div>
  <!-- end navbar -->

  <!-- sidebar -->
  <div id="sidebar-nav">
    <jsp:include page="import/sidebar.jsp" />
  </div>
  <!-- end sidebar -->


  <!-- main container -->
  <div class="content">

    <!-- settings changer -->
    <div class="skins-nav">
      <a href="#" class="skin first_nav selected"> <span class="icon"></span><span class="text">Default</span>
      </a> <a href="#" class="skin second_nav" data-file="css/skins/dark.css"> <span class="icon"></span><span
        class="text">Dark skin</span>
      </a>
    </div>

    <div class="container-fluid">
      <div id="pad-wrapper" class="users-list">
        <div class="row-fluid header">
          <h3>Danh Mục</h3>
          <div class="span10 pull-right">
            <input type="text" class="span5 search" placeholder="Type a user's name..." />

            <!-- custom popup filter -->
            <!-- styles are located in css/elements.css -->
            <!-- script that enables this dropdown is located in js/theme.js -->
            <div class="ui-dropdown">
              <div class="head" data-toggle="tooltip" title="Click me!">
                Filter users <i class="arrow-down"></i>
              </div>
              <div class="dialog">
                <div class="pointer">
                  <div class="arrow"></div>
                  <div class="arrow_border"></div>
                </div>
                <div class="body">
                  <p class="title">Show users where:</p>
                  <div class="form">
                    <select>
                      <option />Name
                      <option />Email
                      <option />Number of orders
                      <option />Signed up
                      <option />Last seen
                    </select> <select>
                      <option />is equal to
                      <option />is not equal to
                      <option />is greater than
                      <option />starts with
                      <option />contains
                    </select> <input type="text" /> <a class="btn-flat small">Add filter</a>
                  </div>
                </div>
              </div>
            </div>

            <a href="new-category.jsp" class="btn-flat success pull-right"> <span>&#43;</span> Thêm danh mục web
            </a>
          </div>
        </div>

        <!-- Users table -->
        <div class="row-fluid table">
          <table class="table table-hover">
            <thead>
              <tr>
                <th class="span4 sortable">Tên Danh Mục</th>
                <th class="span3 sortable"><span class="line"></span>Còn hoạt động</th>
                <th class="span2 sortable"><span class="line"></span>Hành Động</th>
                <!--                                 <th class="span3 sortable align-right"> -->
                <!--                                     <span class="line"></span>Email -->
                <!--                                 </th> -->
              </tr>
            </thead>
            <tbody>
              <!-- row -->
              <s:iterator value="listCategory" var="list">
                <tr class="first">

                  <td>
                    <!--                                 <img src="img/contact-img.png" class="img-circle avatar hidden-phone" /> -->
                    <a href="user-profile.html" class="name"> <s:property value="#list.categoryName"/> </a> <!--                                 <span class="subtext">Graphic Design</span> -->
                  </td>
                  <td>
                  <s:if test="%{#list.active==true}">Còn</s:if>
                  <s:if test="%{#list.active==false}">Không</s:if>
                  </td>
                  <td>
                    <a href="delete-category?categoryId=<s:property value="#list.categoryId"/>" class="name"> Delete </a>
                  </td>
                  <!--                             <td class="align-right"> -->
                  <!--                                 <a href="#">alejandra@canvas.com</a> -->
                  <!--                             </td> -->
                </tr>
              </s:iterator>
              <!-- row -->

              <!-- row -->

              <!-- row -->

              <!-- row -->

              <!-- row -->

              <!-- row -->

              <!-- row -->

              <!-- row -->

            </tbody>
          </table>
        </div>
        <div class="pagination pull-right">
          <ul>
            <li><a href="#">&#8249;</a></li>
            <li><a class="active" href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&#8250;</a></li>
          </ul>
        </div>
        <!-- end users table -->
      </div>
    </div>
  </div>
  <!-- end main container -->


  <!-- scripts -->
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/theme.js"></script>
</body>
</html>